export default {
    data() {
        return {
            // 添加角色弹出框
            dialogAddVisible: false,
            // 修改角色弹出框
            dialogUpdateVisible: false,
            // 分配权限弹出框
            dialogRightsVisible: false,
            // 所有角色数据
            rolesList: [],
            // 添加角色表单数据
            addRoleForm: {
                roleName: '',
                roleDesc: ''
            },
            // 更新表单时的数据
            updateRoleForm: {
                roleName: '',
                roleDesc: ''
            },
            // 当前角色更新的id
            roleId: '',
            // 表单校验
            rules: {
                roleName: [{
                    required: true,
                    message: '请输入角色名称',
                    trigger: 'blur'
                }, ],
                roleDesc: [{
                    required: true,
                    message: '请输入角色描述',
                    trigger: 'blur'
                }, ]
            },
            // 权限数据
            rightsList: [],
            // 树形控件配置项
            treeProps: {
                label: 'authName',
                children: 'children'
            },
            // 默认被选中的数组
            defaultTreeArr: []
        }
    },
    created() {
        this.getRolesList();
    },
    methods: {
        // 获取所有角色
        async getRolesList() {
            let {
                data: res
            } = await this.$http.get('roles');
            // console.log(res)
            if (res.meta.status != 200) return this.$message.error('获取角色失败');
            this.rolesList = res.data;
        },
        // 添加角色
        addRole() {
            this.$refs.addRoleForm.validate(async valid => {
                if (!valid) return;
                let {
                    data: res
                } = await this.$http.post('roles', this.addRoleForm);
                // console.log(res)
                if (res.meta.status != 201) return this.$message.error('添加角色失败');
                this.$message.success('添加角色成功');
                this.dialogAddVisible = false;
                this.getRolesList();
                this.$refs.addRoleForm.resetFields();
            })
        },
        // 根据 ID 查询角色
        async searchRole(id) {
            // 暂存id
            this.roleId = id;
            // 打开弹框
            this.dialogUpdateVisible = true;
            // 请求数据
            let {
                data: res
            } = await this.$http.get('roles/' + id);
            // console.log(res)
            if (res.meta.status != 200) return this.$message.error('查询角色数据失败');
            this.updateRoleForm = res.data;
        },
        // 编辑提交角色
        submitRole() {
            this.$refs.updateRoleForm.validate(async valid => {
                if (!valid) return;
                let {
                    data: res
                } = await this.$http.put('roles/' + this.roleId, this.updateRoleForm);
                // console.log(res)
                if (res.meta.status != 200) return this.$message.error('更新角色失败');
                this.$message.success('更新角色成功');
                this.dialogUpdateVisible = false;
                this.getRolesList();
            })
        },
        // 删除角色
        deleteRole(id) {
            this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.delete('roles/' + id).then(() => {
                    this.getRolesList();
                });
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 查询权限
        async getRights(row) {
            this.roleId = row.id;
            this.dialogRightsVisible = true;
            let {
                data: res
            } = await this.$http.get('rights/tree');
            // console.log(res)
            if (res.meta.status != 200) return this.$message.error('查询权限失败');
            this.rightsList = res.data;
            let arrKey = [];
            // console.log(arrKey)
            this.defaultTreeArr = arrKey;
            this.recursiveQuery(row, arrKey);
        },
        // 递归查询
        recursiveQuery(row, arrKey) {
            if (!row.children) {
                return arrKey.push(row.id);
            }
            row.children.forEach(item => this.recursiveQuery(item, arrKey));
        },
        // 角色授权
        async roleImpower() {
            // 半选id
            let halfId = this.$refs.tree.getHalfCheckedKeys();
            // 获取全选id
            let checkAllId = this.$refs.tree.getCheckedKeys();
            let {
                data: res
            } = await this.$http.post('roles/' + this.roleId + '/rights', {
                rids: halfId.concat(checkAllId).join(',')
            });
            // console.log(res)
            if (res.meta.status != 200) return this.$message.error('角色授权失败');
            this.$message.success('角色授权成功');
            this.dialogRightsVisible = false;
            this.getRolesList();
        },
        // 关闭 Tag 时触发的事件
        async handleClose(role, rightId) {
            let {
                data: res
            } = await this.$http.delete('roles/' + role.id + '/rights/' + rightId);
            // console.log(res)
            if (res.meta.status != 200) return this.$message.error('取消权限失败');
            this.$message.success(res.meta.msg);
            role.children = res.data;
        }
    },
}